<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<style>
    .base{
        width:100px;
        height: 100px;
        background: green;
    }
    .active{
        border: solid 1px blue;
    }
    .error{
        background: red;
    }
    .test{
        font-size: 22px;
    }
</style>
<h4>16.v-bind:style</h4>
<div id="app-16">
    <div v-bind:style="{border:borderStyle,height:heightStyle,width:widthStyle}"> style1</div>
    <div v-bind:style="objStyle"> objStyle</div>
    <div v-bind:style="[objStyle,overStyle]"> objStyle</div>
</div>


<div>
    <h4>15.v-bind:class</h4>
    <div id="app-15">
        <div v-bind:class="{base:true,active:activeShow,error:errorShow}"> class style1</div>

        <input type="button" v-on:click="handle" value="切换">

        <div v-bind:class="['base',activeClass,errorClass,{test:testShow}]"> class style2</div>

        <input type="button" v-on:click="handle1" value="切换">
        <div v-bind:class="arrClass"> class style3</div>
        <div class="base" v-bind:class="objClass"> class style4</div>
    </div>

    <h4>14.v-model底层实现</h4>
    <div id="app-14">
        <div>{{msg}}</div>
        <input type="text" v-bind:value="msg" v-on:input="handle">
        <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
        <input type="text" v-model="msg">
    </div>

    <h4>13.v-bind属性</h4>
    <div id="app-13">
        <a :href="url">百度</a>
        <input type="button" v-on:click="handle" value="切换">
    </div>

    <h4>12.计算器</h4>
    <div id="app-12">
        <form>
            a:<input type="text"  v-model="a"><br>
            b:<input type="text"  v-model="b"><br>
            <input type="button" v-on:click="handle" value="计算">
            <div  >结果为:{{res}}</div>
        </form>
    </div>

    <h4>11.按键修饰符</h4>
    <div id="app-11">
        <form>
            用户名:<input type="text"  v-model="name" v-on:keyup.delete="clearname"><br>
            密码:<input type="password"  v-model="password" v-on:keyup.enter="onSubmit"><br>
            code:<input type="text"   v-model="code" v-on:keyup.aaa="getCode"><br>
            <input type="button" v-on:click="onSubmit" value="提交">
        </form>

    </div>

    <h4>10.冒泡，默认行为阻止</h4>
    <div id="app-10">
        <div>{{num}}</div>
        <div @click="handle0">
            <input type="button" @click="handle1" value="handle1">
            <input type="button" @click.stop="handle2" value="handle2">
        </div>
        <a href="https://www.baidu.com"  v-on:click="goBaidu"> baidu</a>
        <a href="https://cn.vuejs.org/" target="_blank" @click.prevent="goVue">vue</a>
    </div>
<h4>9. v-on</h4>
<div id="app-9">
    <span>{{num}}</span>
    <input type="button" v-on:click="num++" value="add">
    <input type="button" @click="plus" value="plus">
    <input type="button" @click="plusStep(2)" value="plusStep">
    <input type="button" @click="plus1" value="plus1">
    <input type="button" @click="handle(1,$event)" value="handle" ref="app9_ref" d="123">
</div>
<h4>2. v-bind</h4>
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
</div>

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
    <button v-on:click="getMessage">getMessage</button>

</div>

<h4>7. v-model</h4>
<div id="app-7">
    <input type="text" v-model="msg">
    <span>{{msg}}</span>
</div>

<h4>8. v-once</h4>
<div id="app-8">
    <input type="text" v-model="msg">
    <span v-once>{{msg}}</span>
    <span>{{msg}}</span>
</div>

</div>

<script>
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true
        }
    })

    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        }
    })

    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })

    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello Vue!'
        },
        methods:{
            getMessage:function(){
                console.log(this.message)
            }
        }
    })

    var app7 = new Vue({
        el: '#app-7',
        data: {
            msg: 'Hello Vue!'
        }
    })
    var app8 = new Vue({
        el: '#app-8',
        data: {
            msg: 'Hello Vue!'
        }
    })
    var app9 = new Vue({
        el: '#app-9',
        data: {
            num: 0
        },
        methods:{
            plus:function(){
                console.log(this===app9);
                this.num++;
            },
            plusStep:function(step){
                this.num+=step;
            },
            plus1:function(event){
                console.log(event.target);
            },
            handle:function(p,event){
                //console.log(arguments);
                console.log(p,event.target,typeof event.target)
                //获取属性
                console.log(this.$refs.app9_ref.getAttribute('d'))
                console.log(event.target.getAttribute('d'))
            }
        }
    })
    var app10 = new Vue({
        el: '#app-10',
        data: {
            num: 0
        },
        methods:{
            handle0:function(){
                this.num++;
                console.log('handel0');
            },
            handle1:function(event){
                this.num++;
                console.log('handel1');
                //原始做法
               //event.stopPropagation();
            },
            handle2:function(){
                this.num++;
                console.log('handel2');
            },
            goBaidu:function (event) {
                event.preventDefault();
                console.log("goBaidu");
            },

            goVue:function(){

            },
            
        }
    })

    Vue.config.keyCodes.aaa=65;
    var app11 = new Vue({
        el: '#app-11',
        data:{
            name:'',
            password:'',
            code:'',
        },

        methods:{
            onSubmit:function(){
                console.log(this.name,this.password)
            },
            clearname:function(){
                this.name='';
            },
            getCode:function (event) {
                console.log(event.keyCode,this.code)
            }
        }
    })
    var app12 = new Vue({
        el: '#app-12',
        data:{
            a:'',
            b:'',
            res:'',
        },
        methods:{
            handle:function(){
                this.res=parseInt(this.a)+parseInt(this.b);
            }
        }
    })

    var app13 = new Vue({
        el: '#app-13',
        data:{
           url:'https://www.baidu.com/'
        },
        methods:{
            handle:function(){
                this.url='https://cn.vuejs.org/'
            }
        }
    })
    var app14 = new Vue({
        el: '#app-14',
        data:{
            msg:'hello'
        },
        methods:{
            handle:function(event){
                this.msg=event.target.value;
            }
        }
    })

    var app15 = new Vue({
        el: '#app-15',
        data:{
            activeShow:true,
            errorShow:true,

            activeClass:'active',
            errorClass:'error',
            testShow:true,
            arrClass:['base','active','error'], //通过操作数组来操作
            objClass:{
                active:true,
                error:true,
            }

        },
        methods:{
            handle:function(){

                this.activeShow=!this.activeShow;
                this.errorShow=!this.errorShow;
            },
            handle1:function(){
                this.activeClass='';
                this.errorClass='';
            }
        }
    })

    var app16 = new Vue({
        el: '#app-16',
        data:{
            borderStyle:'solid 1px red',
            heightStyle:'200px',
            widthStyle:'100px',
            objStyle:{
                border:'solid 1px green',
                height:'100px',
                width:'200px'
            },
            overStyle:{
                background:'red'
            }

        }
    })

</script>
</body>
</html>